<template>
	<div class="acount">
		<el-form :inline="true" :model="formInline" class="demo-form-inline">
			<el-form-item>
				<el-date-picker v-model="date" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" clearable>
				</el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSeach" icon="el-icon-search">搜索</el-button>
				<el-button type="primary" @click="huazhuan">糖果划转</el-button>
			</el-form-item>
		</el-form>
		<div style="display: flex;align-items: center;justify-content: flex-end;height: 60px;">
			<div class="">
				<span>账户糖果余额：</span>
				<span style="font-size: 30px;color: red;font-weight: bold;">{{count}}</span>
			</div>
		</div>
		
		<el-table :data="tableData" style="width: 100%" border stripe>
			<el-table-column prop="userName" label="用户名" align="center">
			</el-table-column>
			<el-table-column prop="sweet" label="划转数量" align="center">
			</el-table-column>
			<el-table-column prop="transferType" label="划转类型" align="center">
				<template slot-scope="scope">
					<span>{{scope.row.transferType==1?'商家账户 => 个人账户':scope.row.transferType==2?'个人账户 => 商家账户':''}}</span>
				</template>
			</el-table-column>

			<el-table-column prop="createDate" label="划转时间" align="center">
			</el-table-column>
		</el-table>
		<div class="page">
			<el-pagination :page-size="size" :current-page="page" layout="prev, pager, next,total,jumper" :total="total"
			 background @current-change="currentChange">
			</el-pagination>
		</div>

		<el-dialog title="糖果划转" :visible.sync="dialogVisible" width="30%">
			<sweet-change v-if="dialogVisible" @success="changeSuccess"></sweet-change>
		</el-dialog>
	</div>
</template>

<script>
import sweetChange from './components/sweetChange.vue'
	export default {
		components: {
			sweetChange
		},
		data() {
			return {
				countStaus:true,
				page: 1,
				size: 10,
				total: 0,
				mid: localStorage.getItem('merchantId'),
				tableData: [],
				count: 0,
				status: '',
				date: [],
				formInline: {
					check_status: '',
					start_date: '',
					end_date: ''
				},
				dialogVisible: false,
				
			}
		},
		mounted() {
			this.getData();
			this.getSweet();
		},
		methods: {
			getData() {
				this.$http.get(this.$api.transItems, {
					check_status: this.formInline.check_status,
					mid: this.mid,
					page: this.page,
					size: this.size,
					start_date: this.date != null ? this.date[0] : '',
					end_date: this.date != null ? this.date[1] : ''
				}).then(res => {
					this.tableData = res.data;
					this.total = res.extraInfo;
				})
			},
			getSweet() {
				this.$http.get(this.$api.sweet + '/' + this.mid).then(res => {
					this.count = res.data.sweetBalance;
				})
			},
			huazhuan() {
				this.dialogVisible = true;
			},
			changeSuccess() {
				this.dialogVisible = false;
				this.getData();
				this.getSweet();
			},
			onSeach() {
				this.page = 1;
				this.getData();
				this.getSweet();
			},
			currentChange(val) {
				this.page = val;
				this.getData();
			}
		}
	}
</script>

<style scoped>
	.acount {
		padding: 15px;
	}

	.page {
		margin-top: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
